<template>
	<view class="submit-box text-align" @click="_click" :style="style">
		<u-loading :show="loading" color="#11caa1"></u-loading>
		<text :style="loading? 'marginLeft: 12rpx': ''">{{title}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: () => ''
			},
			marginTop: {
				type: Number,
				default: () => 100
			},
			bgColor: {
				type: String,
				default: () => '#eec67f'
			},
			loading: {
				type: Boolean,
				default: () => false
			}
		},
		computed: {
			style() {
				let _this = this;
				return `marginTop: ${_this.marginTop}rpx; backgroundColor: ${_this.bgColor}; opacity: ${_this.loading? .85: 1};`
			}
		},
		methods: {
			_click() {
				if (this.loading) return;
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-box {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
</style>
